<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单的笔记应用</title>
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage@4.15.2/dist/av.min.js"></script>
    <style>
        /* 你的 CSS 样式，保持不变 */
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #f44336;
            --bg-color: #f0f2f5;
            --card-bg-color: #ffffff;
            --border-color: #e0e0e0;
            --shadow-color: rgba(0,0,0,0.1);
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: var(--bg-color);
            margin: 0;
            padding: 20px;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 10px;
        }
        h1 {
            text-align: center;
            color: #444;
            margin-bottom: 20px;
        }
        .add-button {
            display: block;
            width: 100%;
            padding: 12px 20px;
            font-size: 16px;
            color: #fff;
            background-color: var(--primary-color);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin: 20px 0;
        }
        .add-button:hover {
            background-color: #45a049;
        }
        .note-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .note-item {
            background-color: var(--card-bg-color);
            border-radius: 8px;
            box-shadow: 0 4px 6px var(--shadow-color);
            padding: 20px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: transform 0.2s ease-in-out;
        }
        .note-item:hover {
            transform: translateY(-2px);
        }
        .note-content {
            flex-grow: 1;
            margin-right: 20px;
            font-size: 16px;
            line-height: 1.6;
            word-wrap: break-word;
        }
        .note-delete-btn {
            background-color: var(--secondary-color);
            color: #fff;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 14px;
        }
        .note-delete-btn:hover {
            background-color: #d32f2f;
        }
        .copy-btn {
            background-color: #008CBA;
            color: #fff;
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 14px;
        }
        .copy-btn:hover {
            background-color: #007B8A;
        }
        .loading {
            text-align: center;
            padding: 20px;
            font-size: 18px;
            color: #888;
        }
        @media (max-width: 600px) {
            body {
                padding: 10px;
            }
            .container {
                padding: 0;
            }
            .note-item {
                flex-direction: column;
                align-items: flex-start;
            }
            .note-content {
                margin-right: 0;
                margin-bottom: 10px;
            }
            .note-delete-btn, .copy-btn {
                width: 100%;
                text-align: center;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>我的简单笔记</h1>
    <button id="add-btn-top" class="add-button">添加笔记</button>
    <ul id="note-list" class="note-list">
        <div id="loading" class="loading">加载中...</div>
    </ul>
    <button id="add-btn-bottom" class="add-button">添加笔记</button>
</div>

<script>
    // ==== 1. 初始化 LeanCloud ====
    AV.init({
        appId: "fXPH9lZeof6tSjLjgD05tJxR-gzGzoHsz",
        appKey: "jdy9umSh0Ggo6dlzwt5W55gn",
        serverURL: "https://fxph9lze.lc-cn-n1-shared.com"
    });

    const Note = AV.Object.extend("Note");
    const noteList = document.getElementById("note-list");
    const loadingEl = document.getElementById("loading");

    // ==== 2. 加载笔记 ====
    async function fetchNotes() {
        loadingEl.style.display = "block";
        noteList.innerHTML = "";
        noteList.appendChild(loadingEl);

        const query = new AV.Query("Note");
        query.descending("createdAt");
        try {
            const notes = await query.find();
            renderNotes(notes);
        } catch (err) {
            console.error(err);
            loadingEl.innerText = "加载失败，请刷新重试";
        }
    }

    function renderNotes(notes) {
        noteList.innerHTML = "";
        if (notes.length === 0) {
            noteList.innerHTML = "<div class='loading'>暂无笔记</div>";
            return;
        }
        notes.forEach(note => {
            const li = document.createElement("li");
            li.className = "note-item";
            li.innerHTML = `
                <div class="note-content">${note.get("content")}</div>
                <button class="note-delete-btn">删除</button>
                <button class="copy-btn">复制</button>
            `;
            li.querySelector(".note-delete-btn").addEventListener("click", () => deleteNote(note));
            li.querySelector(".copy-btn").addEventListener("click", () => copyToClipboard(note.get("content")));
            noteList.appendChild(li);
        });
    }

    // ==== 3. 复制到剪贴板 ====
    function copyToClipboard(content) {
        const isMobile = /Mobi|Android/i.test(navigator.userAgent);

        if (isMobile) {
            // 在手机设备上使用Clipboard API
            navigator.clipboard.writeText(content)
                .then(() => alert('已复制到剪贴板'))
                .catch(err => alert('复制失败：' + err));
        } else {
            // 在PC端使用execCommand
            const textarea = document.createElement('textarea');
            textarea.value = content;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('已复制到剪贴板');
        }
    }

    // ==== 4. 删除笔记 ====
    async function deleteNote(note) {
        if (!confirm("确定要删除这条笔记吗？")) return;
        try {
            await note.destroy();
            fetchNotes();
        } catch (err) {
            alert("删除失败，请重试");
            console.error(err);
        }
    }

    // ==== 5. 添加笔记 ====
    async function addNote() {
        const content = prompt("请输入笔记内容：");
        if (!content) return;

        const note = new Note();
        note.set("content", content);
        try {
            await note.save();
            fetchNotes();
        } catch (err) {
            alert("保存失败，请重试");
            console.error(err);
        }
    }

    // ==== 6. 绑定按钮事件 ====
    document.getElementById("add-btn-top").addEventListener("click", addNote);
    document.getElementById("add-btn-bottom").addEventListener("click", addNote);

    // ==== 7. 页面加载时获取笔记 ====
    fetchNotes();
</script>
</body>
</html>
